import { defineComponent } from 'vue'
import { LeftOutlined } from '@ant-design/icons-vue'
import homeIcons from '../../assets'
import '../../styles/player-video.less'

export default defineComponent({
  props: {
    type: {
      type: Number
    }
  },
  setup(props) {
    return () => (
      <>
        <div class="w-full h-[211px] player-container relative  video_shadow  player_shadow text-white ">
          <header class="flex items-center justify-between px-3 h-11 absolute top-0 left-0 right-0">
            <LeftOutlined />
            <span v-show={props.type !== 7 && props.type !== 8}>
              <label class="pr-6">TV图标</label>
              <label>耳机图标</label>
            </span>
          </header>
          <img src={homeIcons.film} alt="" class="img-show w-[70px]" />
          <div
            v-show={props.type !== 7 && props.type !== 8}
            class={
              props.type === 7 || props.type === 8
                ? 'z-0'
                : 'absolute bottom-0 left-0 flex items-center justify-between w-full px-6 h-11 dome-text'
            }
          >
            <span>图标</span>
            <span class="mr-4 w-[220px] ml-3">
              <span>进度条</span>
              <span>06:22/30:56</span>
            </span>
            <span>图标</span>
            <span>图标</span>
          </div>
          <div class="absolute text-xs text-white left-4 bottom-3 payer-video-vip z-10" v-show={props.type === 7}>
            <span class="try-watch">试看中</span> 开通VIP会员，观看完整版
          </div>
          <div class="absolute text-xs text-white left-4 bottom-3 payer-video-vip z-10" v-show={props.type === 8}>
            <span class="text-[#e1c781]">开通VIP会员</span>，<span class="pr-5">观看完整版</span>
          </div>
        </div>
      </>
    )
  }
})
